<template>
  <div class="salaryEmployee">

    <template v-if = '!isNoData'>
        <div v-for="totalSumObj in totalList" class="dateContainer">
            <p>{{totalSumObj.summary.cal_PRD_ID.replace(/[\/]/g,"年") + "月"}}</p>
            <v-title :salaryGet="totalSumObj.summary.sfgz" :salaryNeed="totalSumObj.summary.yfgz">
                <div slot="first">
                    <span>实发工资</span>
                    <span>{{totalSumObj.summary.currency_CD}} {{totalSumObj.summary.c_NET_PAY | keepTwoNum}}</span>
                </div>
                <div slot="sec">
                    <span>应发工资</span>
                    <span>{{totalSumObj.summary.currency_CD}} {{totalSumObj.summary.c_NET_PAY | keepTwoNum}}</span>
                </div>          
            </v-title>
            <div class="detailCon">
                <v-detail :salaryNeed="totalSumObj.summary.c_GROSS_AMT" >
                    <span slot="title"><i  class="icon-wallet"></i>收入合计</span>

                </v-detail>
                <v-detail :salaryNeed="totalSumObj.summary.c_DDCT_AMT" >
                    <span slot="title"><i  class="icon-pie"></i>扣减合计</span>



                </v-detail>
                <v-detail :salaryNeed="totalSumObj.summary.c_LABORCOST" >
                    <span slot="title"><i  class="icon-work-cost"></i>人工成本合计</span>
                    <div><span>基本养老保险公司</span><span>{{totalSumObj.summary.c_LABORCOST | keepTwoNum}}</span></div>
                </v-detail>
                <v-detail :salaryNeed="totalSumObj.summary.c_MPF" >
                    <span slot="title"><i  class="icon-cost"></i>公司承担社保/MPF</span>

                </v-detail>
            </div>
            <div class="detailCon">
                <v-detail >
                    <span slot="title"><i  class="icon-cost"></i>薪酬组成</span>
                    <div slot="content">
                        <div v-for="(item,index) in salaryContain" :key="index">
                            <span>{{item.descr}}</span>
                            <span> {{item.comprate | keepTwoNum}}</span>
                        </div>
                    </div>
                </v-detail>
            </div>
        </div>
    </template>


    <div v-if = 'isNoData'>
            <div class="null-container" >

            </div> 
            <p class="nodate">暂无数据</p>      
        </div> 
    </div>
</template>

<script>


import title from '@/components/resume/title'
import detailList from '@/components/resume/detailList'
export default { 
  data () {
    return {
        showDate:null,
        endDate:null,
        salaryGet:"2990.00",
        salaryNeed:"2990.00",
        visibleDate:false,
        detailTax:false,
        beginDate:null,
        totalList:[],
        salaryContain:null,
        deduction:[],
        taxList:[],
        fund:null,
        pickDate:null,
        isNoData:false,
    }
  },
  components: {
    'v-title':title,
    'v-detail':detailList
  },
  methods:{
     postAjax:function(){
        var emplid = localStorage.getItem('per_em');
       
        var params = {
           emplId:emplid,
        };
        this.Axios.Post(this.URL.getSalaryByEmplid.url,params).then(res =>{
            
            if (!res.data.datas || !res.data.datas.salarys || res.data.datas.salarys.length<1  ) {
                this.isNoData = true;
                return;
            }

            this.totalList = res.data.datas.salarys || [{}];
            this.salaryContain = res.data.datas.salaryComprise || {};
            this.$emit('loadEnd');


  
        })
     },
     showTax:function(){
        this.detailTax = !this.detailTax;
     },
     selectDate:function(){
         this.visibleDate = !this.visibleDate;
     },
     search:function(){
        var date = this.showDate.split("-");
        if (date.length === 1){
            var date = date[0].replace(/["年"]/g,'/').replace(/["月"]/g,'');
            var arr = date.split("/");
            if (arr[1].length <2) {
                this.beginDate = this.endDate = arr[0] + "/0" + arr[1]
            } else {
                this.beginDate = this.endDate = date[0];
            }
                
        } else {
            var date1 = date[0].replace(/["年"]/g,'/').replace(/["月"]/g,'');
            var date2 = date[1].replace(/["年"]/g,'/').replace(/["月"]/g,'');
            var arr1 = date1.split("/");
            var arr2 = date2.split("/");
            if (arr1[1].length <2) {
                this.beginDate = arr1[0] + "/0" + arr1[1]
            } else {
                this.beginDate = date1;
            }
            if (arr2[1].length <2) {
                this.endDate = arr2[0] + "/0" + arr2[1]
            } else {
                this.endDate = date2;
            }
        }
        this.postAjax();
     }
  },
  mounted:function(){
      var year = new Date().getFullYear(),month =new Date().getMonth()+1;
      this.showDate = this.pickDate = year + "年" + month + "月";
      if (month<10) {
          month = "0" + month;
      }
      this.beginDate = this.endDate = year + "/" + month;
      this.postAjax();
  },
  filters:{
    keepTwoNum: function(value) {
        if (!value) {   
            return '0.00';
        }
        var value=Math.round(parseFloat(value)*100)/100;

        var xsd=value.toString().split(".");
        if(xsd.length==1){
            value=value.toString()+".00";
            return value;
        }
        if(xsd.length>1){
            if(xsd[1].length<2){
                value=value.toString()+"0";
            }
            return value;
        }
        


    }
  },
  watch:{
      pickDate:function(newVal){
            var arr = newVal.split("-");
            if (arr[0] === arr[1]) {
                this.showDate = arr[0];
            } else {
                this.showDate = newVal;
            }
      }
  }
}
</script>
<style lang="less" scoped>
.salaryEmployee{
//    background-color:#fff;
   margin-top:0.1rem;
   div.top{
      text-align: center;
      height: 0.94rem;
      font-size:0.32rem;
      line-height: 0.94rem;
      font-weight: 500;
      .icon-pack-up{
        color:#aaa;
        margin:0.34rem;
      }
   }
   .dateContainer>p{
       color:#007de4;
       line-height:1rem;
       height:1rem;
       font-size:0.32rem;
       margin-left:0.2rem;
   }

}
</style>
<style>
.salaryEmployee .title-container .title-con{
    background-color: #f3f3f3 !important;
    padding-bottom: 0rem !important;
}
.salaryEmployee .detailCon .detail-container{
    padding-bottom: 0rem;
}
.detailCon{
    margin:auto 0.2rem 0.2rem 0.2rem;
    background-color:#F3F3F3;
    overflow:hidden;
    border-radius:0.1rem;
}


.nodate{
    text-align:center;
    font-size:0.32rem;
}
.null-container{
    height: 5.2rem;
    background:url(/static/imgs/nodata.png) no-repeat center;
}

</style>

